<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
</table>
<script>
    function Person() {
    }

    let p1 = new Person();
    p1.name = "刘德发"
    p1.age = 50;
    p1.run = function () {
        console.log(this.name + ":" + this.age)
    }
    p1.run();


    function Car() {
        this.name = "跑跑卡丁车"
        this.price = 20;
        this.run = function () {
            console.log(this.name + ":" + this.price)
        }
    }

    let c = new Car();
    c.run();


    let p2 = {};
    p2.name = "貂蝉"
    p2.age = 22;
    p2.run = function () {
        console.log(this.name + ":" + this.age)
    }
    p2.run();

    let p3 = {
        name: "吕布",
        age: 28,
        run: function () {
            console.log(this.name + ":" + this.age)
        }
    }
    p3.run()

    let arr = [
        {title: "小米手机", price: 5000, num: 500},
        {title: "华为手机", price: 6000, num: 100},
        {title: "vivo手机", price: 4000, num: 300},
        {title: "一加手机", price: 3000, num: 400}
    ]
    let table = document.querySelector("table")
    for (let item of arr) {
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td")
        let priceTd = document.createElement("td")
        let numTd = document.createElement("td")
        titleTd.innerText = item.title;
        priceTd.innerText = item.price;
        numTd.innerText = item.num;
        tr.append(titleTd,priceTd,numTd)
        table.append(tr)
    }



</script>
</body>
</html>